<%--<%@ page language="java" contentType="text/html; charset=UTF-8"--%>
<%--         pageEncoding="UTF-8"%>--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>景点详细信息页面</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/back-style/css/bootstrap.min.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/back-style/css/bootstrap-responsive.min.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/back-style/css/uniform.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/back-style/css/select2.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/back-style/css/matrix-style.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/back-style/css/matrix-media.css" />
    <link href="${pageContext.request.contextPath}/back-style/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
</head>
<body>

<div id="content">
    <div id="content-header">
        <div id="breadcrumb"> <a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> Home</a> <a href="#" class="current">Tables</a> </div>
        <h1>景点信息</h1>
    </div>
    <div class="container-fluid">
        <hr>
        <div id="page-wrapper">
            <div class="main-page">
                <div class="tables">
                    <div class="panel-body widget-shadow">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>景点id</th>
                                <th>景点名称</th>
                                <th>景点地址</th>
                                <th>景点门票价格</th>
                                <th>景点开放时间</th>
                                <th>景点描述</th>
                                <th>景点图片</th>
                                <th>景点状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="sightDetail" >
                            <%-- <tr>
                                 <th scope="row">1</th>
                                 <td>Mark</td>
                                 <td>Otto</td>
                                 <td>@mdo</td>
                             </tr>--%>
                            </tbody>

                            </ul>
                        </table>
                    </div>
                </div>
            </div>

            <!--footer-->
            <div class="footer">
                <!-- 分页信息 -->
                <div id="showPageInfo"></div>
                <!-- 分页实现    -->

            </div>
            <div class="pagination" align="center"><!-- 设置居中 -->
                <ul class="pagination"  id="pageItem"></ul>
            </div>
        </div>
    </div>
</div>
<!--Footer-part-->
<div class="row-fluid">
    <div id="footer" class="span12">景点信息管理</div>
</div>

<%--模态框开始--%>
<form class="form-horizontal" id="updateForm" enctype="multipart/form-data" method="post">

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">修改景点信息</h4>
                </div>






                <!-- 景点名 -->
                <div class="form-group" style="margin-left: 15px;margin-right: 15px">
                    <label for="sightName" class="">景点名</label>
                    <input type="text" class="form-control" id="sightName"
                           name="sightName" value=""/>

                    <%--隐藏adminNum--%>
                    <input type="hidden" id="sightId" name="sightId">
                </div>

                <!-- 景点地址 -->
                <div class="form-group" style="margin-left: 15px;margin-right: 15px">
                    <label for="sightAdd" class="">景点地址</label>
                    <input type="text" class="form-control" id="sightAdd"
                           name="sightAdd" value=""/>
                </div>

                <!-- 门票价格 -->
                <div class="form-group" style="margin-left: 15px;margin-right: 15px">
                    <label for="sightPrice" class="">门票价格</label>
                    <input type="text" class="form-control" id="sightPrice"
                           name="sightPrice" value=""/>
                </div>


                <!-- 开放时间 -->
                <div class="form-group" style="margin-left: 15px;margin-right: 15px">
                    <label for="sightOpenTime" class="">开放时间</label>
                    <input type="text" class="form-control" id="sightOpenTime"
                           name="sightOpenTime" value=""/>
                </div>


                <!-- 景点描述 -->
                <div class="form-group" style="margin-left: 15px;margin-right: 15px">
                    <label for="sightDescribe" class="">景点描述</label>
                    <input type="text" class="form-control" id="sightDescribe"
                           name="sightDescribe" value=""/>
                </div>

                <%--景点图片--%>
                <div class="form-group" style="margin-left: 15px;margin-right: 15px">
                    <label for="sightImg" class="">景点图片</label>
                    <span id="span1">
                       <input type="file" class="form-control" id="sightImg"
                              name="sightImg" style="height: auto" value=""/>
                     </span>
                    <input type="hidden" class="form-control" id="sightImg2"
                           name="sightImg2" value=""/>
                </div>

                <!-- 景点描述 -->
                <div class="form-group" style="margin-left: 15px;margin-right: 15px">
                    <label for="sightStatus" class="">景点状态</label>
                    <input type="text" class="form-control" id="sightStatus"
                           name="sightStatus" value=""/>
                </div>


                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="updateBtn">提交更改</button>
                </div>

            </div>
        </div>
    </div>
</form>
<%--模态框结束--%>

<!--end-Footer-part-->
<script src="${pageContext.request.contextPath}/back-style/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/back-style/js/jquery.ui.custom.js"></script>
<script src="${pageContext.request.contextPath}/back-style/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/back-style/js/jquery.uniform.js"></script>
<script src="${pageContext.request.contextPath}/back-style/js/select2.min.js"></script>
<script src="${pageContext.request.contextPath}/back-style/js/jquery.dataTables.min.js"></script>
<script src="${pageContext.request.contextPath}/back-style/js/matrix.tables.js"></script>
</body>
<script type="text/javascript">
    //声明一个全局的
    var key="";
    $(function(){
        //一进来就分页查询
        $.get("${pageContext.request.contextPath }/SightDetailController/getAllSightDetail",function(result){
            showData(result);
        },"json");

        //首页
        $(document).on("click",".first",function(){
            $.get("${pageContext.request.contextPath }/SightDetailController/getAllSightDetail",{sightName:key,pageNum:1,pageSize:5},function(result){
                showData(result);
            },"json");
        });
        //末页
        $(document).on("click",".last",function(){
            var totalPage=$("#totalPage").text();
            $.get("${pageContext.request.contextPath }/SightDetailController/getAllSightDetail",{sightName:key,pageNum:totalPage,pageSize:5},function(result){
                showData(result);
            },"json");
        });
        //上一页
        $(document).on("click",".up",function(){
            var currentPage=$("#currentPage").text();
            $.get("${pageContext.request.contextPath }/SightDetailController/getAllSightDetail",{sightName:key,pageNum:(parseInt(currentPage)-1),pageSize:5},function(result){
                showData(result);
            },"json")
        });
        //下一页
        $(document).on("click",".next",function(){
            var currentPage=$("#currentPage").text();
            $.get("${pageContext.request.contextPath }/SightDetailController/getAllSightDetail",{sightName:key,pageNum:(parseInt(currentPage)+1),pageSize:5},function(result){
                showData(result);
            },"json");
        });
        //每一页
        $(document).on("click",".currentPage",function(){
            var currentPage=$(this).text();
            $.get("${pageContext.request.contextPath }/SightDetailController/getAllSightDetail",{sightName:key,pageNum:currentPage,pageSize:5},function(result){
                showData(result);
            },"json")
        });
        //跳转
        $(document).on("click",".trunto",function(){
            var pageNum=$("#turntoId").val();
            var totalPage=$("#totalPage").text();
            if(pageNum<1){
                pageNum=1;
                $("#turntoId").val(pageNum);
            }else if(pageNum>totalPage){
                pageNum=totalPage;
                $("#turntoId").val(pageNum);
            }
            //发送ajax请求
            $.get("${pageContext.request.contextPath }/SightDetailController/getAllSightDetail",{sightName:key,pageNum:pageNum,pageSize:5},function(result){
                showData(result);
            },"json")
        });

        //搜索
        $("#search").click(function(){
            key=$("#keyword").val();
            $.get("${pageContext.request.contextPath }/SightDetailController/getAllSightDetail",{sightName:key,pageNum:1,pageSize:5},function(result){
                showData(result);

            },"json")
        });

        //删除
        $(document).on("click","#delSightDetail",function(){
            var sightId=$(this).data("sightid");
            var flag=confirm("是否删除该景点");
            alert(sightId);
            if(flag){
                $.get("${pageContext.request.contextPath }/SightDetailController/delSightDetail",{sightId:sightId},function(result){
                    if (result) {
                        alert(result);
                        $.get("${pageContext.request.contextPath }/SightDetailController/getAllSightDetail",{pageNum:$("#currentPage").text(),pageSize:5,sightName:key},function(data){
                            showData(data);
                        },"json")
                    }
                    else {
                        alert("删除失败")
                    }

                },"json")
            }
        })
        //更新

        $("#updateBtn").click(function(){
            //1.获取表单数据(普通表单控件，包括文件组件的表单数据)
            var formData = new FormData($("#updateForm")[0]);
            //2.发送ajax请求，把数据传到后台updateForm
            $.ajax({
                async:true,
                url:"${pageContext.request.contextPath }/SightDetailController/modifySightDetail",
                type:"POST",
                data:formData,//重点必须仅为一个变量：formData
                contentType:false,//"application/x-www-form-urlencoded",////必须设置false，因为formData是一个对象，并且已经设置了enctype
                processData:false,//必须设置成false，规定通过请求发送的数据是否转换为查询字符串，默认是true，要提交的formD对象
                success:function(result){
                    if(result=true){
                        $("#myModal").modal('hide');
                        $.get("${pageContext.request.contextPath }/SightDetailController/getAllSightDetail",{pageNum:$("#currentPage").text(),pageSize:5,sightName:key},function(data){
                            showData(data);

                        },"json")
                    }
                },
                error:function(){
                    alert("异步请求失败");
                }

            })
        })


        function showData(result){
            //1.每一次遍历之前需要清空
            $("#sightDetail").empty();
            //2.清空分页的累计
            $("#showPageInfo").empty();
            $("#pageItem").empty();
            $.each(result.list,function(index,obj){
                var $word="<tr class=\"center\">\n" +
                    "                  <td>"+obj.sightId+"</td>\n" +
                    "                  <td>"+obj.sightName+"</td>\n" +
                    "                  <td>"+obj.sightAdd+"</td>\n" +
                    "                  <td>"+obj.sightPrice+"</td>\n" +
                    "                  <td>"+obj.sightOpenTime+"</td>\n" +
                    "                  <td>"+obj.sightDescribe+"</td>\n" +
                    "                  <td><img width=\"60px\" height=\"60px\" border=\"1\" alt=\"图片未找到...\"src=\"${pageContext.request.contextPath }/DownloadFile?sightImg="+obj.sightImg+"\">"+
                    "                  <td>"+(obj.sightStatus == 1 ? "开放" : "未开放") +"</td>\n" +
                    " <td><a class=\"title1\" class=\"btn btn-primary btn-lg\" data-toggle=\"modal\" data-target=\"#myModal\"\r\n" +
                    "									data-sightid=\""+obj.sightId +"\"\r\n" +
                    "									data-sightname=\""+obj.sightName +"\"\r\n" +
                    "									data-sightadd=\""+obj.sightAdd +"\"\r\n" +
                    "									data-sightprice=\""+obj.sightPrice +"\"\r\n" +
                    "									data-sightopentime=\""+obj.sightOpenTime +"\"\r\n" +
                    "									data-sightdescribe=\""+obj.sightDescribe +"\"\r\n" +
                    "									data-sightimg=\""+obj.sightImg +"\"\r\n" +
                    "									data-sightstatus=\""+obj.sightStatus+"\"\r\n" +
                    "\" onclick=\"showUpdateDate(this)\">\r\n" +
                    "									<button  class=\" btn btn-success\">修改</button></a><a href=\"\" id=\"delSightDetail\" \r\n" +
                    "									data-sightid=\""+obj.sightId+"\"\r\n" +
                    "									<button class=\"btn btn-success\">删除</button></a></td>\r\n" +
                    "                </tr>";
                $("#sightDetail").append($word);


            });
            //显示分页信息
            $("#showPageInfo").append("当前第<span id='currentPage'>"+result.pageNum+"</span>页/共<span id='totalPage'>"+result.pages+
                "</span>页/每页显示<span id='pageSize'>"+result.pageSize+"</span>条/共<span id='totalCount'>"+result.total+"</span>条数据");

            //首页
            if(1==result.pageNum){
                $("#pageItem").append('<li class="disabled"><a href="#">首页</a></li>');
            }else{
                $("#pageItem").append('<li><a href="#" class="first">首页</a></li>');
            }
            //上一页
            if(1==result.pageNum){
                $("#pageItem").append('<li class="disabled"><a href="#">上一页</a></li>');
            }else{
                $("#pageItem").append('<li><a href="#" class="up">上一页</a></li>');
            }
            //显示分页栏目
            for(var i=1;i<=result.pages;i++){
                if(i==result.pageNum){
                    $("#pageItem").append('<li class="active"><a href="#">'+i+'</a></li>');
                }else{
                    $("#pageItem").append('<li><a href="#" class="currentPage">'+i+'</a></li>');
                }
            }
            //下一页
            if(result.pageNum==result.pages){
                $("#pageItem").append('<li class="disabled"><a href="#">下一页</a></li>');
            }else{
                $("#pageItem").append('<li><a href="#" class="next">下一页</a></li>');
            }
            //末页
            if(result.pageNum==result.pages){
                $("#pageItem").append('<li class="disabled"><a href="#">末页</a></li>');
            }else{
                $("#pageItem").append('<li><a href="#" class="last">末页</a></li>');
            }
            //跳转页
            $("#pageItem").append('<li ><a href="#"><input type="number" id="turntoId" value="'+result.pageNum+'" min="1" max="'+result.pages+
                '" style="width:50px;height:17px; margin-bottom: 0px" /></a></li>');
            $("#pageItem").append('<li><a href="#" class="trunto">跳转</a></li>');
        }


    })


    //获取原来的数据
    function showUpdateDate(obj){
        document.getElementById("span1").innerHTML="<input type=\"file\"  class=\"form-control\" id=\"sightImg\"name=\"sightImg\" value=\"\" />";

        /*  $("#updateForm").reset();*/
        var sightId=obj.getAttribute("data-sightid");
        var sightName=obj.getAttribute("data-sightname");
        var sightAdd=obj.getAttribute("data-sightadd");
        var sightPrice=obj.getAttribute("data-sightprice");
        var sightOpenTime=obj.getAttribute("data-sightopentime");
        var sightDescribe=obj.getAttribute("data-sightdescribe");
        var sightImg=obj.getAttribute("data-sightimg");
        var sightStatus=obj.getAttribute("data-sightstatus");




        //显示在模态框中指定的位置
        $("#myModal #sightId").val(sightId);
        $("#myModal #sightName").val(sightName);
        $("#myModal #sightAdd").val(sightAdd);
        $("#myModal #sightPrice").val(sightPrice);
        $("#myModal #sightOpenTime").val(sightOpenTime);
        $("#myModal #sightDescribe").val(sightDescribe);
        $("#myModal #sightImg2").val(sightImg);
        $("#myModal #sightStatus").val(sightStatus);


    }

</script>
</html>
